<template>
    <div>
        <!--面包屑导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
         <!--添加角色区域-->
            <el-row>
                    <el-col :span="4">
                    <el-button type="primary"  @click="addDialog=true" >添加用户</el-button>
                    </el-col>
            </el-row>
            <el-table :data="roleList" border stirpe>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <el-row v-if="item1.level===0&&item1.parentId===0"
                        :class="['bdbottom',i1 === 0 ? 'bdtop':'','vcenter']" v-for="(item1,i1) in scope.row.children" :key="item1.id">
                            <el-col :span="8" >
                                <el-tag>{{item1.name}}</el-tag>
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="16">
                                <el-row v-if="item2.level===1 && item2.parentId===item1.id && item2.status!=='1'"
                                :class="['bdbottom',i1 === 0 ? 'bdtop':'','vcenter']" v-for="(item2,i2) in scope.row.children" :key="item2.id">
                                    <el-col >
                                        <el-tag type="success">{{item2.name}}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                            
                        </el-row>
                    </template>
                </el-table-column>
                <!--索引列-->
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="descn"></el-table-column>
                <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="编辑角色" placement="top">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showUpdateDialog(scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除角色" placement="top">
                                <el-button type="danger" icon="el-icon-delete"size="mini" @click="removeRoleById(scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="分配菜单" placement="top">
                                <el-button type="warning" icon="el-icon-setting"size="mini" @click="showSetRightDialog(scope.row)"></el-button>
                            </el-tooltip>         
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
        title="添加角色"
        :visible.sync="addDialog"
        width="50%"
        @close="addDialogClose"
        >
        <el-form :model="addForm" ref="addFormRef"
         label-width="70px" >
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="addForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="descn">
                <el-input v-model="addForm.descn"></el-input>
            </el-form-item> 
           
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="addRole">确 定</el-button>
        </span>
        </el-dialog>
        <!--编辑角色信息对话框-->
        <el-dialog title="编辑用户"  :visible.sync="updatedialogVisible" width="50%">
            <el-form :model="updateForm"  ref="updateFormRef"
             label-width="70px" >
                <el-form-item label="角色名" prop="roleName">
                    <el-input v-model="updateForm.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="descn">
                    <el-input v-model="updateForm.descn"></el-input>
                </el-form-item>
               
            </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updatedialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateRoleInfo(updateForm.id)">确 定</el-button>
  </div>
</el-dialog>
<el-dialog
        title="分配权限"
        :visible.sync="setRightDialogVisible"
        width="50%"
      >
        <!-- 树形控件 -->
        <el-tree
          :data="menuList"
          :props="treeProps"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
          :default-checked-keys="checkedKeys"
          ref="treeRef"
        ></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button @click="assignPermissions()">分配权限</el-button>
        </span>
      </el-dialog>

    </div>
</template>
<script>
export default{
    data(){
        return{
            setRightDialogVisible:false,
            updatedialogVisible:false,
            addDialog:false,
            updateForm:{},
            roleList:[],
            menuList:[],
            checkedKeys:[],
            treeProps: {
          children: 'children',
          label: 'name'
        },
            addForm:{
                roleName:'',
                descn:''
            },
            roleId:''
        }
    },
    created(){
        this.getRoleList()
    },
    methods:{
       //表单退出重置
       addDialogClose(){
            this.$refs.addFormRef.resetFields()
        },//添加角色表单提交
        async addRole(){
            console.log(this.addForm)
          const { data: res} = await this.$http.post('/sysRole/add', this.addForm)
          console.log('res', res)
          if(res === 'ok') {
            this.$message.success("新增后台角色成功")
            this.addDialog=false
            this.getRoleList()
          }
      
         },//通过ID删除角色
         async removeRoleById(id){
           //console.log(id)
            //弹框询问用户是否删除数据
            const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            //如果用户确认删除，则返回值为字符串 confirm
            //如果用户取消删除，则返回值为字符串 cancel
            //console.log(confirmResult)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除')
            }
            
            const { data: res } = await this.$http.post(`/sysRole/deleteRole/${id}`)
            if (res!== true) {
                return this.$message.error('删除角色失败！')
            }
            this.$message.success('删除角色成功！')
            this.getRoleList()
        },//展示对换框Dialog
        async showUpdateDialog(id){
            const {data:res}= await  this.$http.post(`/sysRole/getRoleById/${id}`)
            this.updateForm=res
            console.log(this.updateForm)
            this.updatedialogVisible=true
        },//获取所有角色列表函数
       async getRoleList(){
       const {data:res}= await this.$http.post('/sysRole/getAllRole')
       this.roleList=res
       console.log("rolelist:"+this.roleList)

       },//修改角色信息函数
       async updateRoleInfo(id){
             const {data:res} =await this.$http.post(`/sysRole/updateRoleById`,this.updateForm)
             if(res){
                this.$message.success("修改用户信息成功")
                this.updatedialogVisible=false
                this.getRoleList()
             }
             
        },//获取所有菜单列表
        async getMenuList(){
            
            const staff=JSON.parse(sessionStorage.getItem('token'))
            const {data:res}=await this.$http.post( '/sysMenu/getmenu',staff)    
            this.menuList=res
            console.log(res)
        },
         showSetRightDialog(role){
            console.log(role)
            this.roleId=role.id
            this.getMenuList()
            this.getLeafKeys(role.id)
            this.setRightDialogVisible=true
         },
         async getLeafKeys(roleId) {
            console.log('roleId',roleId)
            const {data:res}= await this.$http.post(`/sysMenu/getAllKeys/${roleId}`)
            console.log('res',res)
            for(let i=0;i<res.length;i++){
                this.checkedKeys.push(res[i].id)
            }
            
            console.log('this.checkedKeys',this.checkedKeys)
      },async assignPermissions(){
                //获取所有选中的菜单ID
                const selectedKeys = this.$refs.treeRef.getCheckedKeys();
                console.log(selectedKeys)// 调用更新角色权限
                // await updateRolePermissions(thSis.roleId, selectedKeys)S;
                //console.log(this.roleId)
                const {data: res}= await this.$http.post(`/sysMenu/updateMenu`, {roleId: this.roleId, selectedKeys: selectedKeys });
               
                this.addFormVisible = false
                // 提示成功，可添加更多逻辑，如刷新页面等
                this.$message.success('权限分配成功');
                this.setRightDialogVisible=false
                this.getRoleList()
      }
           
       
    }

}
</script>
<style lang="less" scoped>
  .el-tag {
    margin: 7px;
  }
  .bdtop {
    border-top: 1px solid #ffffff;
  }
  .bdbottom {
    border-bottom: 1px solid #ffffff;
  }
  .vcenter {
    display: flex;
    align-items: center;
  }
  </style>
  